<template>
  <div class="root">
    <header>
      <h1>分站管理系统</h1>
      <div class="other">
        <Button type="primary" id="copy" @click="copy"><span>复制商家链接</span></Button>
<!--        <Button type="primary" style="margin-left: 20px">联系客服</Button>-->
        <div class="user">
          <img src="./photo-default.png"/>
          <span style="margin-left: 20px;">当前用户: {{user?user.username:'游客'}}</span>
        </div>
        <div class="logout" @click="toLogin"><Icon type="md-log-out"/></div>
      </div>
    </header>
    <div class="con">
      <menus class='menu' :activeName="activeName" :openNames="openNames"/>
      <router-view class="right" @select-menu="selectMenu"/>
    </div>
  </div>
</template>
<script>
import menus from './components/menu.vue'
import {getUser, logout} from '@/store'
import {branchInfo} from '@/api/api-list'
import Clipboard from 'clipboard'
export default {
  name: 'Root',
  components: {menus},
  data: function () {
    return {
      user: getUser(),
      activeName: '',
      openNames: [],
      link: ''
    }
  },
  mounted () {
    branchInfo().then(res => {
      this.link = res.data.inviteUrl
    })
  },
  methods: {
    copy () {
      var _this = this
      let clipboard = new Clipboard('#copy', {
        text: function () {
          return _this.link
        }
      })
      clipboard.on('success', function (e) {
        _this.$Message.info('复制成功')
      })
      clipboard.on('error', function () {
        _this.$Message.info('复制失败，您可以尝试手动复制')
      })
    },
    toLogin () {
      logout()
      this.$router.push('/login')
    },
    selectMenu (route, openName) {
      this.activeName = route
      this.openNames = new Array(openName)
      console.log('selectMenu', this.openNames)
    }
  }
}
</script>
<style scoped lang="less">
  .root{
    height: 100vh;
    display: flex;
    flex-direction: column;
  }
  .root header{
    padding-left: 40px;
    height: 100px;
    line-height: 100px;
    background: #363e4f;
    color: #fff;
    display: flex;
    justify-content: space-between;
    .other{
      padding-right: 30px;
      display: flex;
      align-items: center;
      .user{
        margin-left: 40px;
        display: flex;
        align-items: center;
        img{
          display: inline-block;
          width: 52px;
          height: 52px;
          border-radius: 50%;
        }
      }
      .logout{
        margin-left: 30px;
        cursor: pointer;
        display: flex;
        align-items: center;
        font-size: 35px;
        color: indianred;
        &:hover{
          transform: scale(1.2);
        }
      }
    }
  }
  .root .con{
    height: calc(100vh - 100px);
    display: flex;
  }
  .root .con .menu{
    height: 100%;
    overflow: auto;
    background: #363e4f;
    flex:none;
  }
  .root .con .right{
    flex: auto;
    padding: 10px;
    background: #f0f1f3;
  }
</style>
